<template>
  <div id="xunJian">
    <div class="bg-color-my">
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="chart-bar" width="0.3rem" height="0.3rem"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2" style="line-height: 0.3rem;font-size: 0.2rem; color: white;color: white;">巡检完成情况</span>
          <!--<dv-decoration-3 style="width:3.2rem;height:.3rem; position:relative;top:-.0375rem;" />-->
        </div>
      </div>
      <div class="d-flex jc-center">
        <!-- <centreLeft1Chart /> -->
        <div id="xunJianChart" style="width: 100%;height:5rem"></div>
      </div>
      <!-- 4个主要的数据 -->
  <!--    <div class="bottom-data">
        <div class="item-box" v-for="(item,index) in numberData" :key="index">
          <div class="d-flex">
            <span class="coin">￥</span>
            <dv-digital-flop :config="item.number" style="width:2.5rem;height:.625rem;" />
          </div>
          <p class="text" style="text-align: center;">
            {{item.text}}
            <span class="colorYellow">(件)</span>
          </p>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      config: {
        lineWidth: 30,
        activeRadius: "80%",
        radius: "75%",
        activeTimeGap: 2000,
        data: [
          {
            name: "周口",
            value: 55
          },
          {
            name: "南阳",
            value: 120
          },
          {
            name: "西峡",
            value: 78
          },
          {
            name: "驻马店",
            value: 66
          },
          {
            name: "新乡",
            value: 80
          }
        ]
      },
      numberData: [
        { value: 48, name: '游虎' },
        { value: 39, name: '施源' },
        { value: 37, name: '谢城' },
        { value: 42, name: '任远' },
        { value: 36, name: '张伍' },
        { value: 37, name: '谭开元' },
        { value: 5, name: '未完成',itemStyle:{color : '#EE6666'} },

      ]

    };
  },
  components: {
  },
  mounted() {
    setTimeout(()=>{
        this.draw()
    },100);
      //this.changeTiming();
  },
  methods: {
    draw(){
        this.myChart = this.$echarts.init(document.getElementById('xunJianChart'))
       let option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          series: [
            {
              name: '任务类型',
              type: 'pie',
              selectedMode: 'single',
              radius: [0, '25%'],
              label: {
                position: 'inner',
                color: 'white',
                fontSize: 9
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 231, name: '计划巡检',selected: true },
                { value: 8, name: '临时巡检',selected: true  },
              ]
            },
            {
              name: '完成情况',
              type: 'pie',
              radius: ['40%', '55%'],
              labelLine: {
                length: 20
              },
              minAngle: 5,           　　 //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
              avoidLabelOverlap: true,   //是否启用防止标签重叠策略

              label: {
                // formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  ',
                color: 'white',
                backgroundColor:'#0352be',
                borderColor: 'rgba(255,255,255,0.5)',
                borderWidth: 0,
                borderRadius: 4,
                fontSize:8,
                normal: {
                  formatter(v) {
                    let text =   '' + v.name+':' +Math.round(v.value)
                    if(text.length <= 8)
                    {
                      return text;
                    }else if(text.length > 8 && text.length <= 16){
                      return text = `${text.slice(0,8)}\n${text.slice(8)}`
                    }else if(text.length > 16 && text.length <= 24){
                      return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16)}`
                    }else if(text.length > 24 && text.length <= 30){
                      return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16,24)}\n${text.slice(24)}`
                    }else if(text.length > 30){
                      return text = `${text.slice(0,8)}\n${text.slice(8,16)}\n${text.slice(16,24)}\n${text.slice(24,30)}\n${text.slice(30)}`
                    }
                  },
                  textStyle:{
                    fontSize:8,
                    borderWidth: 0,
                    color:'#FFF'

                  },
                },
              },
              data: this.numberData
            }
          ]
        }
        this.myChart.setOption(option);
    },



    changeTiming() {
      setInterval(() => {
        this.changeNumber();
        this.draw();
      }, 3000);
    },
    changeNumber() {
      this.numberData.forEach((item, index) => {
        item.value +=(Math.random()-0.5)*20;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
#xunJian {
  padding: 0.2rem;
  height: 5.775rem;
  border-radius: 0.0625rem;
  .bg-color-my {
    height: 5.3625rem;
    border-radius: 0.125rem;
  }
  .text {
    color: #c3cbde;
  }
  .chart-box {
    margin-top: 0.2rem;
    width: 2.125rem;
    height: 2.125rem;
    .active-ring-name {
      padding-top: 0.125rem;
    }
  }

  .bottom-data {
    .item-box {
      float: right;
      position: relative;
      width: 50%;
      color: #d3d6dd;
      // 金币
      .coin {
        position: absolute;
        left: 0.1rem;
        top: 0.2125rem;
        font-size: 0.25rem;
        color: #ffc107;
      }
      .colorYellow {
        color: yellowgreen;
      }
    }
  }
}
</style>